 /*
 * @description: 班级数据
 * @Author: along
 * @Date: 2021-07-27
 * @Last Modified by: along
 * @Last Modified time: 2021-07-27
 */
<template>
    <div class="container socialClassindex">
        <div class="__nav">
            <p class="__nav_title">
                班级数据
            </p>
        </div>
        <!-- header -->
        <div class="header-nav">
            <div class="header_left">
                <div class="__info">
                    <p class="__info_title">班级名称</p>
                    <el-input
                        v-model="formData.keyword"
                        placeholder="请输入专业名称"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        :style="{width: '206px'}"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">开始入学年份</p>
                    <el-select
                        v-model="formData.enter_school_start_year"
                        placeholder="请选择"
                        size="small"
                        clearable
                        @change="getTableData(1)"
                        :style="{width: '180px'}"
                    >
                        <el-option
                            v-for="item in startYear"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="__info">
                    <p class="__info_title">结束入学年份</p>
                    <el-select
                        v-model="formData.enter_school_end_year"
                        placeholder="请选择"
                        size="small"
                        clearable
                        @change="getTableData(1)"
                        :style="{width: '180px'}"
                    >
                        <el-option
                            v-for="item in startYear"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <div class="__wrap">
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
                ref="socialClassindex"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="class_name"
                    label="班级名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="enter_school_year"
                    label="入学年份"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="class_index"
                    label="班级序号"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="student_count"
                    label="学生数量"
                    show-overflow-tooltip
                    align="left"
                />
                <el-table-column
                    label="操作"
                    align="left"
                    :width="170"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="handleEditname(scope.row)"
                        >
                            编辑序号
                        </el-button>
                        <el-button
                            type="text"
                            class="curse-add"
                            :style="{color: 'rgba(249, 91, 86, 1)'}"
                            @click="handleDeleteClass(scope.row)"
                        >
                            删除班级
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>

        <!-- 编辑班级名称 -->
        <el-dialog
            title="编辑班级名称"
            width="530px"
            custom-class="schedule-dialog"
            :visible.sync="showEditDialog"
            class="__social_class_dialog"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleEditForm"
            >
                <el-form-item
                    prop='name'
                    label="班级名称"
                >
                    <el-input
                        placeholder="请输入班级名称"
                        v-model="ruleForm.name"
                        size="medium"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    type="default"
                    @click="showEditDialog = false"
                    :style="{width: '100px', marginRight: '24px'}"
                >取消</el-button>
                <el-button
                    size="small"
                    type="primary"
                    @click="submitEditForm('ruleEditForm')"
                    :style="{width: '100px'}"
                >确定</el-button>
            </div>
        </el-dialog>

        <!-- 删除弹窗 -->
        <show-dialog
            ref="showDialog"
            :dialog="showDialogDelete"
            :width="360"
            :cancel-text="'取消'"
            :confirm-text="'确认'"
            :title="'温馨提示'"
            :content="'是否删除此班级?'"
            @close="showDialogDelete = false"
            @emit="emitFun"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import showDialog from '@/components/common/dialog.vue';
export default {
    mixins: [back],
    components: {
        showDialog
    },
    data () {
        return {
            class_no: '',//班级编号
            formData: {
                keyword: '',
                status: 99,
                enter_school_start_year: '',
                enter_school_end_year: ''
            },
            date: [],
            showDialog: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            authResult: {},
            school_id: '',
            college_no: '',
            // 删除弹窗
            showDialogDelete: false,
            //编辑班级
            ruleForm: {
                name: ''
            },
            showEditDialog: false,
            rules: {
                name: [
                    { required: true, message: '请输入班级名称', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ]
            },
            startYear: [],
            copeRow: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.school_id = this.$route.query.school_id ? this.$route.query.school_id : '';
        this.college_no = this.$route.query.college_no ? this.$route.query.college_no : '';
        this.major_no = this.$route.query.major_no ? this.$route.query.major_no : '';
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '社交'},{title: '学院数据', path: '/student/social-college?school_id=' + this.school_id},{title: '专业数据', path: '/student/social-major?school_id=' + this.school_id + '&college_no=' + this.college_no},{title: '班级数据'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
        this.getFullyear(2005);
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/region_class%5Cget_list', {
                page_id: page || this.page.now_page,
                city_id: '',
                school_id: '',
                college_no: '',
                major_no: this.major_no,
                from_type: 99,
                keyword: this.formData.keyword,
                enter_school_start_year: this.formData.enter_school_start_year,
                enter_school_end_year: this.formData.enter_school_end_year
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 获取入学年份
         */
        getFullyear(startYear) {
            let year = new Date().getFullYear();
            let newYear = [];

            for (let i = year; i >= startYear; i--) {
                newYear.push({
                    value: i,
                    label: i
                });
            }
            this.startYear = this.startYear.concat(newYear);
        },

        /**
         * @description 删除班级
         */
        handleDeleteClass (row) {
            this.class_no = row.class_no;
            this.showDialogDelete = true;
        },

        /**
         * @description 确定删除
         */
        emitFun () {
            this.showDialogDelete = false;
            this.$post('/student/region_class%5Cset_status', {
                class_no: this.class_no,
                class_status: 0
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.getTableData(1);
                }
                if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 编辑班级名称
         */
        handleEditname (row) {
            this.ruleForm = {
                name: row.class_index
            };
            this.copeRow = row;
            this.college_no = row.class_no;
            this.showEditDialog = !this.showEditDialog;
        },

        /**
         * @description 提交班级名称
         */
        submitEditForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/region_class%5Csave', {
                        class_no: this.college_no,
                        class_index: this.ruleForm['name'],
                        enter_school_year: this.copeRow.enter_school_year,
                        education_year: this.copeRow.education_year,
                        class_group_number: this.copeRow.class_group_number,
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            });
                            this.showEditDialog = !this.showEditDialog;
                            this.getTableData(1);
                        }
                        if (resp.code == 0) {
                            this.showEditDialog = !this.showEditDialog;
                            this.$message({
                                type: 'warning',
                                messaeg: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * @description 时间处理
         */
        pickerOptions () {
            return {
                shortcuts : [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            };
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.socialClassindex {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    // width: 100%;
    // height: 100%;
    overflow: hidden;
    margin: 12px;
    .__nav {
        width: 100%;
        height: 67px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 35px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        margin-bottom: 24px;
        .__nav_title {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: rgba(24, 144, 255, 1);
            }
        }
    }
    .header-nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding: 0 32px;
        .header_left {
            display: flex;
            align-items: center;
        }
        .__info {
            display: flex;
            align-items: center;
            margin-right: 32px;
            .__info_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 12px;
                white-space: nowrap;
            }
        }
        .__left_button {
            flex: 1;
            height: 36px;
            background: rgba(32, 160, 255, 0.1);
            border-radius: 4px;
            border: 1px solid #20A0FF;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            // margin-right: 32px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            .el-icon-hand-iconjia {
                color: rgba(32, 160, 255, 1);
                margin-right: 10px;
                font-size: 14px;
                font-weight: 500;
            }
        }
        .__right_button {
            width: 128px;
            height: 36px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #20A0FF;
            text-align: center;
            line-height: 36px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
    }

    .__wrap {
        width: calc(100% - 64px);
        margin-left: 32px;
        margin-bottom: 12px;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    /* 表单 */
    .scope-price {
        width: 50px;
        height: 50px;
    }
    /* 字体高亮 */
    .cursor-font {
        color: rgb(64, 158, 255);
        cursor: pointer;
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}
/* 排序 */
.sort-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .sort-spliter {
        width: 1px;
        height: 12px;
        background: rgba(235, 235, 235, 1);
        margin: 0 10px;
        }
        .btn-sort {
        font-size: 14px;
        line-height: 1;
        color: #ccc;
        &:hover {
            color: #20a0ff;
        }
    }
}
.el-button-left {
    margin-left: 40px;
}
.el-button-right {
    margin-right: 10px;
}
.__flex {
    display: flex;
    align-items: center;
    .__flex_status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
    }
}
</style>
<style lang="less">
    .socialClassindex{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-dialog__header {
            padding-top: 10px;
            box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;
            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }
            .el-icon-close:before {
                color: rgb(194,194,194);
                font-size: 17px;
                font-weight: bold;
            }
            .el-dialog__headerbtn {
                top: 14px;
            }
        }
        .__social_class_dialog {
            .el-dialog__body {
                padding-left: 64px;
                padding-right: 64px;
                padding-bottom: 10px;
            }
        }
    }
</style>